<template>
	<view>
		<view class="app-header">
			<view v-if="fixed" class="header-placeholder" :style="{ height: topNum + height + 'px',backgroundColor: color ? color : 'transparent'}"></view>
			<view :class="[fixed ? 'header-fixed' : 'header-absolute']" :style="{background: color}">
				<view class="status-bar" :style="{height: topNum + 'px'}"></view>
				<view class="left" @click="nextLink" :style="[{
					height: height + 'px'
				}]">
					<image src="/subpages/static/images/icon-01.png" class="img" mode="widthFix"></image>
					<view class="title">{{title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			color: String,
			height: {
				type: Number,
				default: 60
			},
			fixed: {
				type:Boolean,
				default: true
			}
		},
		data() {
			return {
				topNum: 0
			}
		},
		mounted() {
			this.topNum = getApp().globalData.menuInfo.contentTop
		},
		methods: {
			nextLink() {
				uni.navigateBack({
					delta: 2
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-header {
		position: relative;
		.header-absolute {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
		}
		.header-fixed {
			position: fixed;
			top: 0;
			left: 0;
		}
		.header-absolute,.header-fixed {
			width: 100%;
			z-index: 99;
			.left {
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				.img {
					width: 20rpx;
				}
				.title {
					font-size: 32rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>